<template>
  <div>
    <el-form ref="addForm" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="部门电话" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="部门地址" prop="address">
        <el-input v-model="form.address" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" style="display: flex; justify-content: flex-end">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumbit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { addDeptApi, getDeptInfoApi, editDeptApi } from '../../../api/department'
export default {
  name: 'addDepartment',
  props: ['isEdit', 'obj'],
  data () {
    const checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[34578]\d{9}$$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    return {
      form: {
        name: '',
        address: '',
        phone: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        address: [
          { required: true, message: '请输入办公地址', trigger: 'blur' },
          {
            min: 4,
            max: 12,
            message: '长度在 4 到 12 个字符',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入联部门方式',
            validator: checkPhone,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleClose () {
      this.$emit('close')
    },
    handleSumbit () {
      this.$refs.addForm.validate((valid) => {
        if (!valid) return
        this.isEdit ? this.onEdit() : this.onAdd()
      })
    },
    async onAdd () {
      const res = await addDeptApi(this.form)
      if (!res) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('添加成功')
      this.handleClose()
      this.$emit('getDeps')
    },
    async onEdit () {
      const res = await editDeptApi(this.obj.id, this.form)
      if (!res) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('更新成功')
      this.handleClose()
      this.$emit('getDeps')
    },
    async getInfo () {
      const res = await getDeptInfoApi(this.obj.id)
      if (!res) return this.$notify.error(res.data.errorMsg)
      this.form = res.data
    }
  },
  created () {
    if (this.isEdit) {
      this.getInfo()
    }
  }
}
</script>

<style>
</style>
